import styled from 'styled-components';
import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';

import { G01Search } from './components';

export interface DiscoveryPageProps {
    style?: CSSProperties;
    category?: string;
}

export const DiscoveryHomePage: React.FC<DiscoveryPageProps> = (props) => {

    const navigate = useNavigate();

    const [keywords, setKeywords] = useState<string | null>(null);

    const [loading, setLoading] = useState<boolean>(false);

    const [category, setCategory] = useState<string>('全部');

    return (
        <Container>
            {/* <SearchBackground src={'https://s.cn.bing.net/th?id=OHR.TeatroColon_ZH-CN5378730986_1920x1080.webp&qlt=50'}></SearchBackground> */}
            <SearchContainer>
                <G01Search keywords={keywords} category={category} categoryPosition={'top'} onChange={(keywords, category) => {
                    //
                    if (!keywords || keywords == '') {
                    } else {
                        navigate(`/discovery/${category}/${keywords}`);
                    }
                }}></G01Search>
            </SearchContainer>
            <NewsContainer>

            </NewsContainer>
        </Container>
    );
}

export default DiscoveryHomePage;

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
`;

const SearchContainer = styled.div`
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
`;

const SearchBackground = styled.img`
    position: absolute;
    height: 100%;
    width: 100%;
`;

const NewsContainer = styled.div`
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
`;